<!-- 商品管理页面 -->
<template>
	<view>
		<!-- 顶部搜索框 -->
		<!-- <top-search :type="2"/> -->
		<u-navbar :border-bottom='false'>
			<navigator class="search_box u-f-ac" hover-class="none" url="/pages/home/goods-manage/goods-search/goods-search">
				<u-icon name="search" color="#cccccc" size="28"></u-icon>
				<text>搜索</text>
			</navigator>
		</u-navbar>
		<!-- tab及页面 -->
		<view class="tab-page">
			<view class="tab">
				<u-tabs :list="tabList" :current="current" @change="change" bg-color="#fff" style="padding: 20rpx 0;"></u-tabs>
			</view>
			<view class="page-content">
				<scroll-view class="scroll-view" scroll-y>
					<view v-for="(item,index) in list" :key="index">
						<!-- 商品管理基础模板 -->
						<view class="goods-manage-card" @tap="goDetail(item)">
							<view class="top">
									<text>商品编号： </text><text class="number">{{item.id}}</text>
								</view>
							<view class="content">
									<view class="picture">
										<image :src="item.mainPicture"></image>
									</view>
									<view class="content-right">
										<view class="content-top">
											<view class="name">
												<text>{{item.productName}}</text>
											</view>
											<view class="price">
												<text>￥{{item.lowestPrice}}</text>
											</view>
										</view>
										<view class="content-bottom">
											<view class="stock">
												<text>库存 {{item.productSort}}</text>
											</view>
										</view>
									</view>
								</view>
							<view class="bottom">
									<view class="bottom-left">
										<!-- <u-icon name="more-dot-fill" color="#9d9d9d" size="28"></u-icon> -->
									</view>
									<view class="bottom-right">
										<button type="default" plain="true" v-if="item.productStatus === 1" @tap.stop="open(item)">下架</button>
										<button type="default" plain="true" v-if="item.productStatus === 0 || item.productStatus === 4 || item.productStatus === 5" @tap.stop="open(item)">删除</button>
										<button type="default" plain="true" v-if="item.productStatus !=1" @tap.stop="editGoods(item)">编辑</button>
									</view>
								</view>
						</view>
					</view>
				</scroll-view>
				<view>
					<load-more :visible="loadMore"></load-more>
					<om-nomore :visible="noMoreFlag" bgcolor="#f9f9f9"></om-nomore>
					<tui-no-data imgUrl="https://sbb-sbb.oss-cn-shenzhen.aliyuncs.com/Open_source_project/mine/empty_bg.png" v-if="noData1">暂无内容</tui-no-data>
				</view>
			</view>
			<!-- 模态框 -->
			<u-modal 
			v-model="show" 
			@confirm="confirm" 
			ref="uModal" 
			:show-cancel-button="true"
			:show-title="false"
			:content="content"
			confirm-color="#2ba4f7"
			:confirm-style="{fontWeight: 'bold'}"
			:content-style="{color: '#000',fontWeight: 'bold'}" title="确定删除该商品"></u-modal>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{name: '审核中',value:0},{name: '销售中',value:1},{name: '已售罄',value:1},{name: '已下架',value:4},{name: '审核不通过',value:2},{name: '回收站',value:5}],     //顶部section选项列表
				current: 0, // 指定第一页为初始页面
				list:[],
				loadMore: false,		//没有更多
				noMoreFlag: false,
				currentPage: 1,			//当前页
				total:0,				//商品总数
				noData1: false,       //没有数据
				show: false,            // 模态框
				content: '',//模态框提示语
				id:0,                   //要删除商品的id
				delPlus:false           //判断是否从回收站删除
			};
		},
		onLoad(e) {
			if(e.wen == 1) return this.current = 1
		},
		onShow() {
			this.clear();
			this.getList()
		},
		methods: {
			//顶部section改变
			change(index) {
				this.current = index;
				this.clear();
				this.getList()
			},
			clear(){
				this.total = 0;
				this.currentPage = 1;
				this.list = [];
				this.noMoreFlag = false;
				this.noData1 = false
			},
			// 获取商品列表
			getList(){
				let obj = this.current == 2 ? {flags:'0'} :{};
				this.$http.post('/api/auth/goods/list',{...obj,status:this.tabList[this.current].value,currentPage:this.currentPage,businessId:this.$store.state.userInfo.id}).then(res => {
					if(!res.success) return;
					this.loadMore = false;
					this.total = res.data.total;
					if(this.total == 0) return this.noData1 = true;
					this.list = [...this.list,...res.data.rows]
				})
			},
			//跳转商品详情
			goDetail(item){
				this.$u.route({url: 'pages/home/goods-manage/details/details',params: {id: item.id,status: item.productStatus}})
			},
			//模态框打开
			open(item) {
				this.show = true;
				this.id = item.id;
				this.content = item.productStatus == 1 ? '确定要下架该商品吗？' : '确定要删除该商品吗？';
				this.delPlus = item.productStatus
			},
			// 模态框-点击确认
			confirm() {
				this.show = false;
				//delPlus为false是普通删除，不删除商品数据，为true是从回收站删除
				let url = this.delPlus == 5 ? '/api/auth/goods/delPlusEsPlus' : '/api/auth/goods/downPlus';
				let formData = this.delPlus == 5 ? this.id :  this.delPlus == 1 ?  {ids:this.id,status:4} : {ids:this.id,status:5};
				this.$http.post(url,formData).then(res => {
					this.$tip.toast('商品删除成功');
					setTimeout(()=>{
						this.clear();
						this.getList()
					},1000)
				})
			},
			//编辑，跳转到商品表单一
			editGoods(item){
				this.$u.route({url: 'pages/home/goods-manage/addProduct/stepOne',params: {goodsId: item.id}})
			},
		},
		onReachBottom() {
			if(this.total == this.list.length) return this.noMoreFlag = true;
			this.loadMore = true;
			this.currentPage++;
			this.getList()
		}
	};
</script>

<style scoped lang="scss">
	.swiper{
		height: calc(100vh - 176rpx);
	}
</style>

<style lang="scss" scoped>
.tab-page{
	.tab{
		z-index: 2;
		position: fixed;
		width: 100vw;
	}
	.page-content{
		padding-top: 60rpx;
		height: calc(100% - 184rpx);
		.scroll-view{
			height: 100%;
		}
	}
}

.goods-manage-card{
	margin: 20rpx;
	padding: 20rpx;
	height: 340rpx;
	border-radius: 20rpx;
	background-color: #fff;
	.top{
		padding: 10rpx 0;
		.number{
			margin-left: 20rpx;
			font-size: 15px;
			font-weight: 700;
		}
	}
	.content{
		display: flex;
		margin: 20rpx 0;
		.picture{
			image{
				width: 144rpx;
				height: 144rpx;
				border-radius: 10rpx;
			}
		}
		.content-right{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-left: 20rpx;
			width: 100%;
			.content-top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 15px;
				font-weight: 700;
				.name{
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.price{
					
				}
			}
			.content-bottom{
				display: flex;
				color: #adadad;
				.stock{
					margin-right: 40rpx;
				}
			}
		}
	}
	.bottom{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.bottom-left{
			margin-left: 20rpx;
			font-weight: 700;
		}
		.bottom-right{
			display: flex;
			button{
				margin-left: 20rpx;
				width: 160rpx;
				height: 60rpx;
				font-size: 14px;
				line-height: 60rpx;
				color: #2ba4f7;
				border: none;
				border-radius: 40rpx;
				background-color: #f7f7f7;
			}
		}
	}
}
</style>

